<template>
  <el-scrollbar class="home-box">
    <div class="describe">基于cesium开发的三维GIS平台</div>
    <el-carousel v-bind="carousel.props" class="carousel-box">
      <el-carousel-item v-for="item in carousel.items" :key="item.url">
        <img class="img" :src="item.url" />
      </el-carousel-item>
    </el-carousel>
    <ul class="introduce">
      <li v-for="(item,index) in introduce" :key="item.title">
        <img :src="item.url" :style="{ order: index % 2 ? 1 : 0 }" />
        <div :style="{ order: index % 2 ? 0 : 1 }">
          <h1>{{ item.title }}</h1>
          <p>{{ item.content }}</p>
        </div>
      </li>
    </ul>
    <div class="timeline-box">
      <h1 class="timeline-title">平台动态</h1>
      <el-timeline>
        <el-timeline-item
          v-for="item in timeline"
          :timestamp="item.time"
          :key="item.time"
          placement="top"
          type="primary"
        >
          <el-card>
            <h4>{{ item.title }}</h4>
            <p>{{ item.content }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </el-scrollbar>
</template>

<script lang="ts">
import { ref, reactive, defineComponent } from 'vue'
import { useRoute } from "vue-router"
export default defineComponent({
  name: 'Home',
  props: {
  },
  setup: () => {
    const carousel = reactive({
      props: {
        interval: 5000,
        height: "4.5rem",
        type: "card",
        trigger: "click"
      },
      items: [
        {
          url: "./images/carousel/1.gif"
        },
        {
          url: "./images/carousel/2.jpg"
        },
        {
          url: "./images/carousel/3.jpg"
        },
      ]

    })
    const introduce = reactive([
      {
        url: "./images/carousel/2.jpg",
        title: "基于开源 + 代码可控",
        content: " 平台基于开源项目Cesium进行的二次开发，优化了一些Cesium的使用问题， 同时集成了一些第三方常用的地图库或开源库,如：Echarts、Mapv、Heatmap、Turf等。 "
      },
      {
        url: "./images/carousel/2.jpg",
        title: "文档简单 + 方便使用",
        content: " 平台使用一目了然，容易学习，无论是API还是文档，都具有很强的可读性、自学习性。 平台支持多种方式导入使用，同时提供大量的示例演示，方便用户快速构建三维Gis应用。  "
      },
      {
        url: "./images/carousel/2.jpg",
        title: "敏捷开发 + 扩展便捷",
        content: "  平台内部设计合理，采用标准的开发模式。 平台提供最基本的开发类，方便用户进行后期的二次开发、实现自定义模块或组件。 "
      },
      {
        url: "./images/carousel/2.jpg",
        title: "多平台支持 + 完整解决方案",
        content: " 平台支持多种终端的使用，用户无需安装任何插件，直接可在浏览器中对三维场景的浏览。 平台同时支持本地化部署，以方便存在网络限制或安全的用户。  "
      }
    ]);
    const timeline = reactive([
      {
        time: "2020年02月01日",
        url: "./images/carousel/2.jpg",
        title: "基于开源 + 代码可控",
        content: " 平台基于开源项目Cesium进行的二次开发，优化了一些Cesium的使用问题， 同时集成了一些第三方常用的地图库或开源库,如：Echarts、Mapv、Heatmap、Turf等。 "
      },
      {
        time: "2020年01月01日",
        title: "文档简单 + 方便使用",
        content: " 平台基于开源项目Cesium进行的二次开发，优化了一些Cesium的使用问题， 同时集成了一些第三方常用的地图库或开源库,如：Echarts、Mapv、Heatmap、Turf等。 "
      }
    ]);

    return { carousel, introduce, timeline }
  }
})
</script>

<style lang="less">
@import url("@/styles/var.less");
.home-box {
  width: 100%;
  height: 100%;
  .describe {
    line-height: 3rem;
    font-size: 0.5rem;
    text-align: center;
    height: 3rem;
  }
  .carousel-box {
    margin: 0 auto;
    width: 90%;
    height: 5rem;
    box-sizing: border-box;
    overflow: hidden;
    .img {
      width: 100%;
      height: 100%;
    }
  }
  .introduce {
    margin-top: 0.2rem;
    li {
      height: 2rem;
      width: 70%;
      margin: 0 auto;
      border-bottom: 1px solid @cr-line-base;
      display: flex;
      padding: 0.5rem 0.5rem;
      > img {
        flex: 1;
      }
      > div {
        flex: 2;
        box-sizing: border-box;
        > h1 {
          text-align: center;
        }
        > p {
          padding: 0.1rem 1.5rem;
        }
      }
    }
  }
  .timeline-box {
    width: 70%;
    margin: 0 auto;
    margin-top: 0.5rem;
    .timeline-title {
      text-align: center;
      padding: 0.2rem 0 0.5rem 0;
    }
  }
}
</style>
